import advListView from "$v/advList"
import {
    isLoginRequest
} from "$a/admin";
import {
    advListRequest,
    addAdvRequest,
    deleteAdvRequest,
    getUpdateDataRequest,
    setUpdateAdvRequest
} from "$a/adv"
//封装一个获取所有广告列表的函数
const getAllAdvList = async (pageNo=1,everyNum=3) => {
    try {
        return await advListRequest(pageNo,everyNum)
    } catch (e) {
        alert("获取广告列表失败" + e.message);
        if (!e.isLogin) {
            return router.go("/login")
        }
    }
}

export default async (req, res, next) => {
    // 路由切换的时候验证是否登录，需要引入isLoginRequest请求模块
    try {
        //路由跳转请求
        await isLoginRequest();
    } catch (e) {
        alert("有异常" + e.message)
        if (!e.isLogin) {
            return router.go('/login')
        }
        //验证不通过，跳转登录界面
    }
    const {
        advList,
        pageCount
    } = await getAllAdvList()
    //广告的二级路由渲染
    res.render(advListView({
        advList,
        pageCount
    }))
    //添加点击事件
    document.onclick = async function (e) {
        //判断点击的是哪个按钮，adv-save、是广告保存的按钮，添加广告逻辑
        if (e.target.id === "adv-save") {
            //实例一个FormData对象，FormData可以携带文件发送请求
            const myForm = new FormData(document.advForm);
            // console.log(myForm.get("advTitle"));
            // console.log(myForm.get("advType"));
            // console.log(myForm.get("advOrder"));
            // console.log(myForm.get("advPic"));
            // console.log(myForm);
            if (!myForm.get("advTitle") || !myForm.get("advType") || !myForm.get("advOrder") || !myForm.get("advPic")) {
                return alert("广告添加不能为空")
            }
            try {
                //发送添加广告请求
                await addAdvRequest(myForm)
                // console.log(re);
                //关闭广告添加的窗口
                document.getElementById('advClose').click()
                //清空表单
                document.advForm.reset()
                //提交成功清空表单与图片
                const oPreImg = document.getElementById('preImg')
                //添加完成将img元素隐藏
                oPreImg.style.display = "none";
                const {
                    advList,
                    pageCount
                } = await getAllAdvList()
                //广告的二级路由渲染
                res.render(advListView({
                    advList,
                    pageCount
                }))
                alert('广告添加成功')
            } catch (e) {
                alert('广告添加异常' + e.message)
                //判断是否是权限异常
                if (!e.isLogin) {
                    //关闭添加广告的弹窗再跳转
                    document.getElementById("advClose").click();
                    router.go("/login");
                }

            }
        }
        //删除图片的逻辑，时间目标文件名为BUTTON且类型列表包含btn-delete才能执行
        if (e.target.nodeName === "BUTTON" && e.target.classList.contains('btn-delete')) {
            // 通过dataset获取_id,这个由我们自己添加
            const _id = e.target.dataset.id;
            try {
                await deleteAdvRequest(_id);
                alert("删除成功")
                const {
                    advList,
                    pageCount
                } = await getAllAdvList()
                //广告的二级路由渲染
                res.render(advListView({
                    advList,
                    pageCount
                }))

            } catch (e) {
                alert("删除数据失败" + e.message)
                if (!e.isLogin) {
                    //关闭添加广告的弹窗再跳转
                    document.getElementById("advClose").click();
                    router.go("/login");
                }

            }
        }
        //点击更新按钮弹窗获取信息的逻辑
        if (e.target.nodeName === "BUTTON" && e.target.classList.contains('btn-update')) {
            const _id = e.target.dataset.id
            console.log(_id);
            try {
                //拿到响应的数据
                const updateData = await getUpdateDataRequest(_id);
                console.log(updateData);
                //将数据放入更新的窗口中,通过name属性获取元素，并向value里添加数据
                document.updateForm.advTitle.value = updateData.advTitle;
                document.updateForm.advType.value = updateData.advType;
                document.updateForm.advOrder.value = updateData.advOrder;
                //因为需要提交的时候需要一个标记来判断到底是那个文件，所以可以将_id添加到按钮里来用作判断,通过dataset属性添加
                document.getElementById('adv-update').dataset.id = updateData._id
            } catch (e) {
                //给更新失败做出反馈
                alert("更新查询失败" + e.message)
                if (!e.isLogin) {
                    router.go("/login")
                }
                document.querySelector(".modal-backdrop").style.display = "none"
            }

        }
        //点击更新的提交按钮的逻辑
        if (e.target.id === "adv-update") {
            const _id = e.target.dataset.id
            //收集表单数据 使用FormData
            const myForm = new FormData(document.updateForm);
            if (!myForm.get("advTitle") || !myForm.get("advType") || !myForm.get("advOrder") || !myForm.get("advPic")) {
                return alert("广告更新不能为空")
            }
            try {
                //发送更新广告请求
                await setUpdateAdvRequest(myForm, _id)
                // console.log(re);
                //关闭广告添加的窗口
                document.getElementById('updateClose').click()
                //清空表单
                document.advForm.reset()
                const {
                    advList,
                    pageCount
                } = await getAllAdvList()
                //广告的二级路由渲染
                res.render(advListView({
                    advList,
                    pageCount
                }))
                alert('广告更新成功')
            } catch (e) {
                alert('广告更新失败' + e.message)
                if (!e.isLogin) {
                    router.go("/login")
                }
                document.querySelector(".modal-backdrop").style.display = "none"
                document.getElementById('updateClose').click()

            }
        }
        //点击页码跳转的逻辑
        if(e.target.nodeName==="SPAN"&&e.target.parentNode.id==="page"){
            const pageNo=e.target.dataset.pageno
            // console.log(pageNo);
            const {
                advList,
                pageCount
            } = await getAllAdvList(pageNo)
            //广告的二级路由渲染
            res.render(advListView({
                advList,
                pageCount
            }))
        }

    }




    //预览图，onchange事件失去焦点时执行
    document.onchange = function (e) {
        //事件对象的目标id为advPic表示正在对添加图片表单进行操作
        if (e.target.id === "advPic") {
            //创建文件读取对象
            const render = new FileReader()
            //使用该实例上的readDataURL将文件转成base64格式
            render.readAsDataURL(e.target.files[0])
            //转换成功执行该函数
            render.onload = function (e) {
                //获取图片dom对象
                const oPreImg = document.getElementById('preImg')
                //将base64添加到src上
                oPreImg.src = e.target.result;
                //将元素显示出来
                oPreImg.style.display = "block";
            }
        }
    }
}